CSS @media: Haqiqatan ham moslashuvchan veb uchun ilg'or media so'rovlar andozalari

Zamonaviy veb-ishlab chiqishning dinamik landshaftida doimiy ravishda kengayib borayotgan qurilmalar va foydalanuvchi kontekstlariga bir tekisda moslashadigan tajribalarni yaratish shunchaki eng yaxshi amaliyot emas, balki zaruratdir. Yuqori aniqlikdagi ish stoli monitorlaridan tortib ixcham smartfonlargacha, yuqori tezlikdagi internetga ega bo'lgan gavjum shahar markazlaridagi foydalanuvchilardan tortib, cheklangan o'tkazuvchanlik qobiliyatiga ega chekka hududlardagilargacha va qorong'u rejimlarni afzal ko'radigan shaxslardan tortib, kamaytirilgan harakatni talab qiladiganlargacha — veb moslashuvchan bo'lishi kerak. Aynan shu yerda moslashuvchan dizaynning tamal toshi bo'lgan CSS @media qoidalari o'zlarining asosiy qo'llanilishidan tashqariga chiqib, ilg'or moslashuvchanlik uchun kuchli vositalarga aylanadi.

Ko'pgina ishlab chiquvchilar @mediadan oddiy to'xtash nuqtalarini (breakpoint) sozlash uchun foydalanish bilan tanish bo'lsalar-da, uning haqiqiy kuchi ilg'or andozalarda, mantiqiy operatorlarda va foydalanuvchi hamda muhit afzalliklaridan foydalanish qobiliyatida yashiringan. Ushbu keng qamrovli qo'llanma sizni asoslardan tashqariga olib chiqib, haqiqatan ham mustahkam, inklyuziv va global miqyosda qulay veb-ilovalarni yaratish imkonini beruvchi ilg'or media so'rov xususiyatlarining murakkab dunyosini o'rganadi.

Biz dizaynlaringizni nafaqat ekran o'lchamiga, balki qurilma imkoniyatlariga, foydalanuvchining maxsus ehtiyojlariga mos sozlamalariga va hatto atrofdagi muhitga ham javob berishiga imkon beradigan usullarni chuqur o'rganamiz, bu esa har bir foydalanuvchi uchun, hamma joyda yuqori darajadagi tajribani ta'minlaydi.

Asos: Asosiy @media sintaksisining qisqacha takrorlanishi

Ilg'or andozalarga o'tishdan oldin, keling, poydevorni tezda qayta ko'rib chiqaylik. Asosiy media so'rovi ixtiyoriy media turidan (screen, print, all kabi) va bir yoki bir nechta media xususiyatlaridan (min-width, orientation kabi) iborat. @media bloki ichidagi uslublar faqat shartlar bajarilgandagina qo'llaniladi.

            /* Oddiy misol: Uslublar faqat kengligi 768px dan katta ekranlarda qo'llaniladi */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Uslublar faqat sahifa chop etilayotganda qo'llaniladi */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Bu fundamental tushuncha juda muhim, chunki ilg'or andozalar bevosita uning ustiga quriladi.

To'xtash nuqtalaridan tashqari: Media so'rov xususiyatlarini tushunish

width va height eng ko'p ishlatiladigan media xususiyatlari bo'lsa-da, boshqa boy to'plam ancha nozik dizayn qarorlarini qabul qilishga imkon beradi. Bu imkoniyatlarni tushunish umumiy mobil/planshet/desktop maketlaridan tashqariga chiqishning kalitidir.

Viewport'ga asoslangan xususiyatlar (Odatdagilar va boshqalar)

Ushbu xususiyatlar jismoniy qurilma ekraniga emas, balki brauzerning ko'rish oynasi (viewport) o'lchamlari va xususiyatlariga bog'liq.

• width, height, min-width, max-width, min-height, max-height: Bular moslashuvchan dizaynning asosiy qismidir. Ular sizga brauzerning ko'rinadigan maydoniga asoslanib to'xtash nuqtalarini belgilashga imkon beradi. Masalan, min-width ma'lum bir piksel qiymatiga yetganda, bir ustunli maketni ko'p ustunli maketga o'zgartirishingiz mumkin.

            /* Kengroq ekranlarda ikki ustunli maketni qo'llash */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio: Bu xususiyatlar sizga viewport kengligining balandligiga nisbatiga asoslanib dizaynlarni maqsad qilib olish imkonini beradi. Bu ultra keng monitorlardan baland smartfonlargacha bo'lgan turli xil ekran shakllari uchun kontentni optimallashtirishda juda foydali.

            /* Ultra keng ekranlar uchun asosiy rasmni optimallashtirish (masalan, 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation: Bu xususiyat viewport portrait (balandlik kenglikdan katta yoki teng) yoki landscape (kenglik balandlikdan katta) rejimida ekanligini aniqlaydi. Bu ayniqsa mobil va planshet tajribalari uchun juda muhim.

            /* Planshetlarda landshaft yo'nalishi uchun maketni sozlash */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Qurilmaga asoslangan xususiyatlar (Kamroq tarqalgan, ammo foydali)

Ushbu xususiyatlar jismoniy chiqish qurilmasining xususiyatlariga bog'liq. Kontent maketi uchun viewportga asoslangan so'rovlar odatda afzal ko'rilsa-da, qurilmaga asoslangan xususiyatlarning o'ziga xos o'rinlari bor.

• device-width, device-height (va ularning min/max variantlari): Tarixiy jihatdan, bular ma'lum bir qurilma o'lchamlarini nishonga olish uchun ishlatilgan. Biroq, ish stollari va planshetlardagi o'zgaruvchan brauzer oyna o'lchamlari va turli piksel zichliklari tufayli, umumiy maket uchun ularga tayanish ishonchsiz bo'lishi mumkin. Viewport o'lchamlari deyarli har doim mosroqdir. Ular hali ham kiosklar kabi qat'iy o'lchamdagi ekranlar uchun maxsus ishlab chiqilgan ilovalar kabi juda tor doiradagi holatlarda ko'rib chiqilishi mumkin, ammo bu odatiy veb-ishlab chiqishda kam uchraydi.
• resolution: Bu xususiyat sizga displeylarni ularning piksel zichligi (DPI yoki DPX - nuqta per piksel) asosida nishonga olishga imkon beradi. Bu "Retina" yoki yuqori DPI ekranlarga yuqori sifatli tasvirlarni yetkazib berish uchun, standart displeylarga keraksiz katta fayllarni yubormaslik uchun juda muhim.

            /* Yuqori DPI ekranlar uchun yuqori aniqlikdagi fon rasmini taqdim etish */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Turli brauzer talqinlarini qamrab olish va kodingizni kelajakka moslashtirish uchun dpi va dppx dan foydalanilganiga e'tibor bering. dppx (dots per pixel unit) odatda afzal ko'riladi, chunki u qurilmaga kamroq bog'liq.

Mantiqiy operatorlar: Shartlarni aniqlik bilan birlashtirish

Haqiqatan ham murakkab media so'rovlarini yaratish uchun siz mantiqiy operatorlar yordamida bir nechta shartlarni birlashtirishingiz kerak. Bular sizga bir qator uslublar qachon qo'llanilishi kerakligini aniq belgilash imkonini beradi.

`and` Operator: Barcha shartlar to'g'ri bo'lishi kerak

and kalit so'zi bir nechta media xususiyatlarini yoki media turlarini va xususiyatlarini birlashtiradi. Uslublar qo'llanilishi uchun barcha belgilangan shartlar to'g'ri (true) deb baholanishi kerak.

            /* Uslublarni faqat kengligi 768px va 1024px orasida bo'lgan ekranlarda qo'llash */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Bu portret rejimdagi planshetlar kabi ma'lum bir qurilma diapazonlarini nishonga olish yoki juda aniq ekran o'lchamlari uchun yuqori darajada moslashtirilgan maketlarni yaratish uchun juda foydali.

`or` Operator (`, ` vergul bilan ajratilgan): Har qanday shart to'g'ri bo'lishi mumkin

CSS @media qoidalarida vergul (`,`) mantiqiy YOKI (OR) vazifasini bajaradi. Agar vergul bilan ajratilgan media so'rovlaridan birortasi to'g'ri (true) deb baholansa, tegishli uslublar qo'llaniladi.

            /* Uslublar ekran kengligi 1200px dan katta bo'lsa YOKI qurilma landshaft yo'nalishida bo'lsa (kenglikdan qat'i nazar) qo'llaniladi */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Uslublar chop etish uchun YOKI minimal aniqlikka ega ekranlar uchun qo'llaniladi */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Yaxshiroq chop etish/yuqori aniqlikdagi render uchun */
  }
}

            

              
                Copy
              
            
          

Bu kuchli xususiyat sizga bir nechta alohida shartlar ostida qo'llanilishi kerak bo'lgan uslublarni guruhlash imkonini beradi, bu esa yanada ixcham va o'qilishi oson uslublar jadvallariga olib keladi.

`not` Operator: Shartni teskari qilish

not kalit so'zi butun bir media so'rovini inkor qiladi, ya'ni uslublar belgilangan shart bajarilmaganda qo'llaniladi.

            /* Uslublarni chop etishdan tashqari barcha media turlariga qo'llash */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Agar minimal kengligi 768px bo'lgan ekran bo'lmasa (ya'ni, chop etish uchun yoki 768px dan kichik ekranlar uchun) uslublarni qo'llash */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

not operatori biroz murakkab bo'lishi va ehtiyotkorlik bilan ishlatilishi mumkin. Nima inkor qilinayotganining doirasini tushunganingizga ishonch hosil qiling. Masalan, @media not screen and (min-width: 768px) "ekran EMAS VA min-width 768px" degan ma'noni anglatadi, bu mantiqan "agar u ekran bo'lmasa YOKI agar u ekran bo'lsa VA max-width 768px dan kichik bo'lsa" ga tengdir. Ko'pincha not min-width o'rniga max-width dan foydalanish aniqroq bo'ladi.

`only` Kalit so'zi: Orqaga qarab moslikni ta'minlash (Tarixiy kontekst)

only kalit so'zi media so'rovlarini to'liq qo'llab-quvvatlamaydigan eski brauzerlardan uslublar jadvallarini yashirish uchun kiritilgan. Agar eski brauzer @media only screen ga duch kelsa, u odatda qoidani e'tiborsiz qoldirardi, chunki u only ni yaroqli media turi sifatida tanimas edi. Zamonaviy brauzerlar uni to'g'ri tahlil qiladi. Bugungi kunda media so'rovlarini brauzerlar keng qo'llab-quvvatlashini hisobga olsak, only yangi loyihalar uchun asosan keraksiz, lekin eski kod bazalarida uchratilishi mumkin.

            /* Misol: Uslublar faqat ekranlarda qo'llaniladi, juda eski brauzerlardan yashirilgan */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Foydalanuvchi afzalliklari media xususiyatlari: Inklyuzivlik va qulaylikni qabul qilish

Bular, ehtimol, eng hayajonli va ta'sirchan ilg'or media so'rov xususiyatlaridir, chunki ular ishlab chiquvchilarga foydalanuvchilarning operatsion tizimi yoki brauzer darajasidagi afzalliklariga bevosita javob berish imkonini beradi, bu esa sezilarli darajada qulayroq va foydalanuvchilarga do'stona tajribalarga olib keladi. Bu, ayniqsa, turli ehtiyojlar va muhitlarga ega global auditoriya uchun muhimdir.

prefers-color-scheme: Ochiq va qorong'u rejimlar

Bu xususiyat foydalanuvchi o'z operatsion tizimi yoki foydalanuvchi agenti uchun ochiq yoki qorong'u ranglar sxemasini so'raganligini aniqlaydi. Qorong'u rejimni amalga oshirish, ayniqsa kam yorug'lik sharoitida yoki yorug'likka sezgir foydalanuvchilar uchun qulaylik va foydalanish imkoniyatini sezilarli darajada yaxshilaydi.

• no-preference: Foydalanuvchi tomonidan afzallik ko'rsatilmagan.
• light: Foydalanuvchi ochiq rejimni afzal ko'radi.
• dark: Foydalanuvchi qorong'u rejimni afzal ko'radi.

            /* Standart (ochiq) rejim */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

Yanada mustahkam qorong'u rejimni amalga oshirish uchun CSS Maxsus Xususiyatlari (o'zgaruvchilar) bebaho hisoblanadi, bu sizga ranglar palitrasini dinamik ravishda aniqlash imkonini beradi.

prefers-reduced-motion: Foydalanuvchi qulayligini hurmat qilish

Animatsiyalar va o'tishlar foydalanuvchi tajribasini yaxshilashi mumkin, ammo ba'zi shaxslar uchun (masalan, vestibulyar kasalliklarga chalinganlar, DEHB bo'lganlar yoki shunchaki harakatni chalg'ituvchi deb biladiganlar uchun) ular noqulaylik yoki hatto ko'ngil aynishiga sabab bo'lishi mumkin. Bu xususiyat foydalanuvchi minimal darajadagi muhim bo'lmagan animatsiyalarni so'raganligini aniqlaydi.

• no-preference: Afzallik ko'rsatilmagan.
• reduce: Foydalanuvchi kamaytirilgan harakatni afzal ko'radi.

            /* Standart animatsiya */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Silliq aylantirishni o'chirish */
  }
}

            

              
                Copy
              
            
          

Har doim kamaytirilgan harakat alternatvasini taqdim etish kuchli qulaylik amaliyotidir. Bu, shaxsiy sezgirligidan qat'i nazar, hamma uchun foydali va qulay bo'lgan veb yaratishga yordam beradi.

prefers-contrast: Vizual kontrastni sozlash

Bu xususiyat foydalanuvchi o'z operatsion tizimi uchun ma'lum bir kontrast darajasini so'raganligini aniqlaydi. Bu ko'rish qobiliyati past bo'lgan yoki ma'lum ranglarni idrok etishda nuqsonlari bo'lgan foydalanuvchilar uchun juda foydalidir.

• no-preference: Afzallik yo'q.
• less: Foydalanuvchi kamroq kontrastni afzal ko'radi.
• more: Foydalanuvchi ko'proq kontrastni afzal ko'radi.
• custom: Foydalanuvchining maxsus kontrast sozlamalari bor (kamroq tarqalgan).

            /* Oshirilgan kontrast uchun uslublar */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

Turli xil kontrast afzalliklari uchun uslublar taqdim etish orqali siz global miqyosdagi foydalanuvchilar uchun yanada qulay va inklyuziv raqamli muhitga faol hissa qo'shasiz.

forced-colors: Tizim tomonidan majburiy ranglar palitrasini boshqarish

Operatsion tizim (Windows Yuqori Kontrast Rejimi kabi) ilovalarga ma'lum bir ranglar palitrasini majburan qo'llaganida, u ba'zan maxsus veb-dizaynlarni bekor qilishi yoki buzishi mumkin. forced-colors media xususiyati ishlab chiquvchilarga ushbu holatga moslashishga yordam beradi va ularga majburiy ranglar cheklovlari doirasida yaxshi ishlaydigan uslublarni taqdim etish imkonini beradi.

• active: Foydalanuvchi agentida faol majburiy ranglar rejimi mavjud.
• none: Faol majburiy ranglar rejimi yo'q.

            /* Yuqori Kontrast Rejimi foydalanuvchilari uchun sozlamalar */
@media (forced-colors: active) {
  /* Elementlarning ko'rinadigan chegaralari borligiga ishonch hosil qilish */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Matnni yashirishi mumkin bo'lgan fon rasmlarini olib tashlash */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Ularni ko'rinadigan qilish */
  }
}

            

              
                Copy
              
            
          

Bu xususiyat qulaylik standartlariga (masalan, WCAG) muvofiqlikni ta'minlash va ushbu tizim darajasidagi sozlamalarga tayanadigan foydalanuvchilar uchun funktsional tajribani taqdim etish uchun juda muhimdir.

Muhit media xususiyatlari: Qurilma imkoniyatlariga moslashish

Ushbu media xususiyatlari foydalanuvchining o'z qurilmasi bilan qanday muloqot qilishiga, masalan, ular ishlatadigan ko'rsatkich qurilmasining turiga yoki displeyining imkoniyatlariga asoslanib tajribalarni moslashtirishga imkon beradi.

hover va any-hover: Ko'rsatkich qurilmalarini farqlash

Bu xususiyatlar sichqoncha bilan ishora qilishni qo'llab-quvvatlaydigan qurilmalar (masalan, sichqonchali ish stollari) va asosan sensorli ekrandan foydalanadiganlar (masalan, smartfonlar, planshetlar) o'rtasidagi farqni aniqlashga yordam beradi. Bu faqat sensorli qurilmalarda noqulay UX andozalarini oldini olish uchun juda muhimdir.

• hover: Asosiy kiritish mexanizmiga ishora qiladi.
• any-hover: Mavjud bo'lgan har qanday kiritish mexanizmiga ishora qiladi.
• Qiymatlar: none (sichqoncha bilan ishora qilish qo'llab-quvvatlanmaydi), hover (sichqoncha bilan ishora qilish qo'llab-quvvatlanadi).

            /* Maslahatlarni faqat sichqoncha bilan ishora qilish imkoniyati bo'lgan qurilmalarda ko'rsatish */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* Sensorli qurilmalarda maslahatlar fokus orqali ishga tushirilishi yoki umuman ko'rsatilmasligi mumkin */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

any-hover dan foydalanish ko'pincha ishonchliroqdir, chunki qurilmada ham sensorli, ham sichqoncha kiritish bo'lishi mumkin (masalan, 2-in-1 noutbuk). Agar any-hover hover bo'lsa, unda kamida bitta kiritish usuli ishora qilishni qo'llab-quvvatlaydi. Agar any-hover none bo'lsa, unda hech qanday kiritish usuli ishora qilishni qo'llab-quvvatlamaydi.

pointer va any-pointer: Ko'rsatkich aniqligini farqlash

Bu xususiyatlar asosiy (pointer) yoki mavjud bo'lgan har qanday (any-pointer) ko'rsatkich qurilmasining aniqligini aniqlaydi.

• none: Ko'rsatkich qurilmasi yo'q.
• coarse: Noaniq ko'rsatkich qurilmasi (masalan, sensorli ekrandagi barmoq).
• fine: Aniq ko'rsatkich qurilmasi (masalan, sichqoncha, stilus).

            /* Noaniq ko'rsatkichlar uchun bosish maydoni o'lchamini oshirish */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Aniq ko'rsatkichlar uchun ichki bo'shliqni kamaytirish */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Bu, barmoq bilan bosish uchun yetarlicha katta bo'lishi kerak bo'lgan sensorli interfeyslarni loyihalash uchun juda muhim, shu bilan birga aniq sichqoncha bilan ishlash mavjud bo'lganda yanada ixcham dizaynga imkon beradi. Bu to'g'ridan-to'g'ri turli xil qurilmalar va foydalanuvchi qobiliyatlari bo'yicha foydalanishga ta'sir qiladi, ayniqsa sensorli qurilmalar keng tarqalgan global bozorlarda.

color-gamut: sRGB'dan tashqari

color-gamut media xususiyati foydalanuvchining displeyi standart sRGB dan kengroq rang gammasini (masalan, P3 yoki Rec. 2020) qo'llab-quvvatlashini aniqlashga imkon beradi. Bu dizaynerlarga mos keluvchi ekranlarda yanada boyroq, yorqinroq ranglar palitrasidan foydalanish imkonini beradi.

• srgb: Standart sRGB gammasi.
• p3: Displey P3 gammasini qo'llab-quvvatlaydi (sRGB dan kengroq).
• rec2020: Displey Rec. 2020 gammasini qo'llab-quvvatlaydi (yanada kengroq).

            /* Mos keluvchi displeylarda yanada yorqinroq brend elementlari uchun P3 ranglaridan foydalanish */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* P3 da yorqin qizil rang */
  }
}

            

              
                Copy
              
            
          

Hali ham rivojlanayotgan bo'lsa-da, bu xususiyat, ayniqsa ijodiy sohalar yoki yuqori aniqlikdagi kontent yetkazib berish uchun yanada vizual jihatdan ajoyib va aniq veb tajribalarining kelajagiga ishora qiladi.

update: Ekran yangilanish tezligini boshqarish

Bu xususiyat chiqish qurilmasi kontent ko'rinishini qanchalik tez o'zgartira olishini ko'rsatadi. Bu animatsiyalar va dinamik kontentni turli ekran turlari uchun optimallashtirishda foydalidir.

• none: Yangilay olmaydi (masalan, chop etilgan hujjat).
• slow: Sekin yangilanadi (masalan, elektron siyohli displeylar, ba'zi eski qurilmalar).
• fast: Tez yangilanadi (masalan, odatiy kompyuter monitorlari, smartfonlar).

            /* Sekin yangilanadigan displeylarda murakkab animatsiyalarni kamaytirish */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Bu xususiyat, batareya quvvati va statik displeyni birinchi o'ringa qo'yadigan elektron kitob o'quvchilari kabi qurilmalardagi foydalanuvchilarning nomunosib animatsiyalar tufayli yomon yoki sekin ishlaydigan tajribaga duch kelmasligini ta'minlashga yordam beradi.

Ilg'or uslublar va eng yaxshi amaliyotlar

Alohida media xususiyatlaridan tashqari, CSS-ni qanday tuzishingiz va bu andozalarni qanday birlashtirishingiz saqlanuvchanlik, ishlash samaradorligi va umumiy dizayn sifatiga sezilarli ta'sir ko'rsatishi mumkin.

Mobile-First va Desktop-First: Strategik tanlov

Mobile-first va desktop-first yondashuvlari o'rtasidagi tanlov moslashuvchan dizayn strategiyasining asosidir.

• Mobile-First (min-width):
  • Eng kichik ekran (mobil) uchun dizayn va uslub berishdan boshlang.
  • Kattaroq ekranlar uchun uslublarni bosqichma-bosqich qo'shish uchun min-width media so'rovlaridan foydalaning.
  • Afzalliklari:
    • Samaradorlik: Mobil qurilmalar ko'pincha kamroq ishlov berish quvvatiga va sekinroq internet aloqasiga ega. Mobile-first yondashuvi dastlab faqat kerakli uslublar yuklanishini ta'minlaydi, bu esa sahifalarning tezroq yuklanishiga olib keladi. Bu rivojlanayotgan internet infratuzilmasiga ega mintaqalardagi foydalanuvchilar uchun juda muhim.
    • Progressiv yaxshilanish: Siz mustahkam, asosiy tajribadan boshlab, yanada kuchliroq qurilmalar uchun yaxshilanishlarni qo'shasiz.
    • Fokus: Ishlab chiquvchilarni muhim kontent va funksionallikka birinchi o'rinni berishga undaydi.
• Desktop-First (max-width):
  • Katta ekranlar (ish stoli) uchun dizayn qilishdan boshlang.
  • Kichikroq ekranlar uchun uslublarni bekor qilish uchun max-width media so'rovlaridan foydalaning.
  • Afzalliklari: An'anaviy ish stoli dizayniga o'rgangan jamoalar uchun osonroq bo'lishi mumkin, ammo ko'pincha mobil qurilmalar uchun murakkabroq bekor qilishlarga olib keladi.

Ko'pgina zamonaviy loyihalar, ayniqsa, turli xil qurilma imkoniyatlari va tarmoq sharoitlariga ega bo'lgan global auditoriyaga mo'ljallangan loyihalar uchun mobile-first yondashuvi qat'iy tavsiya etiladi.

            /* Mobile-first yondashuvi: Kichik ekran uslublari standart hisoblanadi */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Planshetga xos uslublar */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Ish stoliga xos uslublar */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

CSS Maxsus Xususiyatlari (O'zgaruvchilar) ni Media So'rovlari bilan ishlatish

CSS Maxsus Xususiyatlari (o'zgaruvchilar) ni media so'rovlari bilan birlashtirish katta, moslashuvchan uslublar jadvallarini saqlash uchun o'yinni o'zgartiruvchi vositadir. Qiymatlarni takrorlash o'rniga, siz ularni bir marta belgilaysiz va ularning qiymatlarini media so'rovlari ichida o'zgartirasiz.

            /* Standart (mobil) qiymatlarni belgilash */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Planshet ekranlari uchun qiymatlarni sozlash */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Ish stoli ekranlari uchun qiymatlarni sozlash */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* O'zgaruvchilarni butun CSS bo'ylab ishlatish */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* 600px va 900px orasidagi ekranlar uchun uslublarni qo'llash */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* An'anaviy sintaksis yordamida ekvivalent */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Chop etish uchun muhim bo'lmagan elementlarni yashirish */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* O'qish qulayligi uchun matnning oq fonda qora bo'lishini ta'minlash */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Havolalar uchun to'liq URL manzillarini ko'rsatish */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Sahifalarni mos ravishda ajratish */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobile-first: Standart sifatida yashirin, ekrandan tashqari menyu */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Planshet va Ish stoli: Gorizontal menyuni ko'rsatish */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Juda keng ekranlar yoki o'ziga xos tomonlar nisbati uchun qo'shimcha sozlamalar */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Standart (mobil/past aniqlikdagi) fon rasmi */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* O'rta aniqlikdagi/ish stoli fon rasmi */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* Yuqori DPI (Retina) ga xos fon rasmi */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* calc() va clamp() yordamida suyuq tipografiya */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Landshaft planshetlar uchun to'rni sozlash, ko'proq ustunlarni afzal ko'rish */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Yaxshiroq o'qilishi uchun yuqori kontrast rejimida shrift qalinligini sozlash */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Markazlashtirilgan rang o'zgaruvchilari, ochiq/qorong'u rejimga moslashuvchan */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Foydalanuvchi afzal ko'rsa animatsiyalarni kamaytirish */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Majburiy ranglar rejimi uchun sozlamalar */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* Tugma chegaralari ko'rinishini ta'minlash */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Kelajakdagi Konteyner so'roviga misol */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy